import React, {Component} from 'react';
import { Layout } from 'antd';
import logoUrl from '../../assets/images/logo.png';
import './Index.scss';
import MenuPart from '../../components/Menus/index.js';
import HeaderPart from '../../components/Header/index'
import ContentPart from '../../components/Content/index'
import actionCreator from "../../store/actionCreator";
import {bindActionCreators} from "redux";
import {connect} from "react-redux";
const { Sider,Footer } = Layout;
class Index extends Component {
  state = {
    collapsed: false,
  };
  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };
  render() {
    let { MenuShrink } = this.props
    return (
      <Layout className={'body_wrap'}>
        <Sider className={`slider_wrap ${MenuShrink?'shrink_menu':''}`} width={ MenuShrink ? 60 :250}>
          {/*logo部分*/}
          <div className="slider_logo_wrap">
            <img src={logoUrl} alt="thunder-goods-CMS" className="logo_pic" draggable={false}/>
            <span className="logo_title">THUNDER GOODS CMS</span>
          </div>
          
          {/*菜单栏部分*/}
          <MenuPart/>
        </Sider>
        <Layout className={'system_main_wrap'}>
          <HeaderPart></HeaderPart>
          <ContentPart></ContentPart>
        </Layout>
      </Layout>
    );
  }

}

export default connect(state=>state,(dispatch)=>{
  return bindActionCreators(actionCreator,dispatch)
})(Index);
